Webpack-Notifier

一款能夠在 Bundle Successfully or Failure 時，跳出桌面級的提醒視窗，具有明顯的提示效果。底層是使用 node-notifier，WINDOWS、MAC 系統皆可支援。



先安裝 Plugin

npm i webpack-notifier -D

設定檔調整如下

webpack.common.js

var path = require('path')
var WebpackNotifierPlugin = require('webpack-notifier')
module.exports = {
  plugins: [
    new WebpackNotifierPlugin({
      title: 'MyProject',
      contentImage: path.join(__dirname, 'logo.png'),
      alwaysNotify: true
    })
  ]
}

可以自行設定提示標題、圖檔、提示時機等。

詳細使用方式請看這裡

Progress-Bar-Webpack-Plugin

在 Webpack Bundle 時，使用進度條的方式顯示在 Terminal，讓我們更容易掌握打包完成的時間。

先安裝 Plugin

npm i progress-bar-webpack-plugin -D

設定檔調整如下

webpack.common.js

var ProgressBarPlugin = require('progress-bar-webpack-plugin')
module.exports = {
  plugins: [
    new ProgressBarPlugin()
  ]
}

詳細使用方式請看這裡